import React from "react";
import { UI_STRINGS } from "../config/strings";
import { STYLES } from "../config/styles";

type Props = {
  // 'onChange' 已重命名为 'onFileChange'
  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  // 新增 props
  onUrlChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  urlValue: string;
};

export function FilePicker({ onFileChange, onUrlChange, urlValue }: Props) {
  // 阻止在 URL 输入框按回车键时触发表单提交（如果存在表单）
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  };

  return (
    <div className="mb-4 space-y-4">
      {/* --- 本地文件/目录上传 --- */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          {UI_STRINGS.filePickerTitle}
        </label>
        <input
          type="file"
          multiple
          // @ts-expect-error: 非标准属性，仅 Chromium 系浏览器支持目录上传
          webkitdirectory="true"
          onChange={onFileChange}
          className={STYLES.fileInput}
          // 当 URL 有值时，禁用文件选择，保持互斥
          disabled={urlValue.length > 0} 
        />
        <p className="text-sm text-gray-500">{UI_STRINGS.filePickerHelp}</p>
      </div>

      {/* --- 分隔符 --- */}
      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t border-gray-300"></span>
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="px-2 bg-white text-gray-500">{UI_STRINGS.or}</span>
        </div>
      </div>

      {/* --- GitHub URL 输入 --- */}
      <div>
        <label htmlFor="github-url" className="block text-sm font-medium text-gray-700 mb-1">
          {UI_STRINGS.githubUrlTitle}
        </label>
        <input
          id="github-url"
          type="text"
          value={urlValue}
          onChange={onUrlChange}
          onKeyDown={handleKeyDown}
          placeholder={UI_STRINGS.githubUrlPlaceholder}
          className={`${STYLES.textInput} w-full`}
          // 当选择了文件时，禁用 URL 输入，保持互斥
          // (我们通过 hook 逻辑清空 files，所以这里可以不加 disabled)
        />
      </div>
    </div>
  );
}